<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Scatter on Single Axis - Apache ECharts Demo</title>
  <link rel="stylesheet" href="scatter-single-axis.css">
</head>
<body>
  <div class="chart-wrapper">
    <h1 class="chart-title">一周活动热力图</h1>
    <div class="websocket-controls">
      <div class="connection-info">
        <span>WebSocket状态: </span>
        <span id="ws-status" class="status-disconnected">未连接</span>
      </div>
      <div class="connection-inputs">
        <input type="text" id="ws-ip" value="192.168.5.10" placeholder="IP地址">
        <input type="number" id="ws-port" value="1234" placeholder="端口">
        <button class="connect-btn" onclick="connectWebSocket()">连接</button>
        <button class="disconnect-btn" onclick="disconnectWebSocket()">断开</button>
        <button class="generate-btn" onclick="generateRandomCircle()">生成随机圆圈</button>
        <button class="clear-btn" onclick="clearAllCircles()">清除所有圆圈</button>
        <button class="uav-list-btn" onclick="getUavList()">获取无人机列表</button>
        <div class="filter-controls">
          <input type="number" id="filter-count" value="10" min="1" placeholder="显示前N个最大圆圈">
          <button class="filter-btn" onclick="filterCircles()">确认过滤</button>
          <button class="clear-filter-btn" onclick="clearFilter()">清除过滤</button>
        </div>
      </div>
    </div>
    <div id="container"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="scatter-single-axis.js"></script>
</body>
</html>